<template>
	<view class="container">
		<!-- 顶部蓝色横幅 -->
		<view class="header-banner">
			<text class="banner-title">重磅会议，活跃健康体系</text>
		</view>

		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 直播介绍区域 -->
			<view class="intro-section">
				<view class="intro-header">
					<text class="section-title">直播介绍</text>
					<view class="action-buttons">
						<image src="/static/prerview/Frame@3x(1).png" mode="aspectFill" class="image"></image>
						<image @click="toggleImage" :src="currentImage" mode="aspectFill" class="image"></image>
					</view>
				</view>
				<view class="intro-text">
					互联网健康直播，让权威医生来到你身边！实时获取专业科普、疾病预防和保健知识，在线答疑解惑。足不出户，轻松学习，便捷互动。是您获取可靠健康信息、进行初步咨询的智能新选择！随时随地，问你想问，守护健康更简单。
				</view>
			</view>

			<!-- 倒计时区域 -->
			<view class="countdown-section">
				<view class="countdown-circle">
					<text class="countdown-text">{{ countdownTime }}</text>
				</view>
			</view>

			<!-- 弹幕消息区域 -->
			<view class="danmu-container">
				<view v-for="(msg, index) in messages" :key="index" class="danmu-item"
					:style="{ bottom: (index * 60) + 'rpx' }">
					<image class="avatar" :src="msg.avatar" mode="aspectFill"></image>
					<view class="danmu-content">{{ msg.content }}</view>
				</view>
			</view>
		</view>

		<!-- 底部操作区域 -->
		<view class="footer-actions" :style="{ bottom: keyboardHeight + 'px' }">
			<view class="message-input">
				<input v-model="message" placeholder="发送消息..." class="input-field" :adjust-position="false"
					@confirm="sendMessage" :focus="isInputFocus" />
			</view>
			<button @click="handleButtonAction" class="action-button"
				:class="{ 'reserved': isReserved && !isInputFocus }">
				{{ isInputFocus ? '发送' : (isReserved ? '已预约' : '立即预约') }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				countdownTime: '02:30:15',
				message: '',
				messages: [],
				avatarList: ['/static/logo.png', '/static/logo.png', '/static/logo.png', '/static/logo.png'],
				timer: null,
				endTime: null,
				simulateTimer: null,
				isReserved: false,
				isLiked: false,
				isHandUpActive: false,
				keyboardHeight: 0,
				isInputFocus: false,
				currentImage: '/static/prerview/Frame@3x(2).png', // 初始显示图片
				isFirstImage: true // 标记当前显示的是哪张图片
			}
		},
		onLoad() {
			const now = new Date();
			this.endTime = new Date(now.getTime() + (2 * 60 * 60 * 1000) + (30 * 60 * 1000) + (15 * 1000));
			this.startCountdown();
			this.startSimulateDanmu();

			// 监听键盘高度变化
			uni.onKeyboardHeightChange(res => {
				this.keyboardHeight = res.height;
				this.isInputFocus = res.height > 0;
			});
		},
		onUnload() {
			clearInterval(this.timer);
			clearInterval(this.simulateTimer);
			uni.offKeyboardHeightChange();
		},
		methods: {
			startCountdown() {
				this.timer = setInterval(() => {
					const diff = this.endTime - new Date();
					if (diff <= 0) {
						this.countdownTime = '00:00:00';
						return;
					}
					this.countdownTime = this.formatTime(diff);
				}, 1000);
			},
			formatTime(ms) {
				const h = Math.floor(ms / 3600000);
				const m = Math.floor((ms % 3600000) / 60000);
				const s = Math.floor((ms % 60000) / 1000);
				return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
			},

			// 弹幕模拟
			startSimulateDanmu() {
				this.simulateTimer = setInterval(() => {
					this.messages.push({
						avatar: this.avatarList[Math.floor(Math.random() * 4)],
						content: Math.floor(Math.random() * 1000) + '!'
					});
					if (this.messages.length > 4) this.messages.shift();
				}, 5000);
			},

			// 点赞功能
			toggleLike() {
				this.isLiked = !this.isLiked;
				uni.vibrateShort(); // 震动反馈
			},

			// 手势图标点击
			toggleHandUp() {
				this.isHandUpActive = !this.isHandUpActive;
				uni.vibrateShort(); // 震动反馈
			},

			// 图片切换功能
			toggleImage() {
				this.isFirstImage = !this.isFirstImage;
				this.currentImage = this.isFirstImage ?
					'/static/prerview/Frame@3x(2).png' :
					'/static/prerview/Frames@3x.png';
				uni.vibrateShort(); // 添加震动反馈
			},

			// 消息发送
			sendMessage() {
				if (!this.message.trim()) return;
				this.messages.push({
					avatar: this.avatarList[Math.floor(Math.random() * 4)],
					content: this.message
				});
				this.message = '';
				if (this.messages.length > 4) this.messages.shift();

				// 发送后隐藏键盘
				this.isInputFocus = false;
				uni.hideKeyboard();
			},

			// 预约处理
			handleReserve() {
				this.isReserved = !this.isReserved;
				uni.showToast({
					title: this.isReserved ? '预约成功' : '已取消预约',
					icon: 'success'
				});
			},

			// 按钮动作处理
			handleButtonAction() {
				if (this.isInputFocus) {
					this.sendMessage();
				} else {
					this.handleReserve();
				}
			}
		}
	}
</script>

<style>
	/* 公共样式 */
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
		font-family: 'PingFang SC', sans-serif;
	}

	/* 顶部横幅 */
	.header-banner {
		height: 120rpx;
		background-color: #1E90FF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 70rpx;
	}

	.banner-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: 600;
	}

	/* 主内容区 */
	.main-content {
		flex: 1;
		padding: 30rpx;
		padding-bottom: 140rpx;
		/* 为底部操作栏留出空间 */
	}

	/* 直播介绍区 */
	.intro-section {
		background-color: #f0f0f0;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.intro-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}


	.image {
		width: 50rpx;
		height: 50rpx;
		margin-left: 30rpx;

	}

	.section-title {
		font-weight: 700;
		font-size: 36rpx;
		color: #333;
	}

	.action-buttons {
		display: flex;
		align-items: center;

	}

	.hand-up-icon {
		margin-left: 15px;
		transition: all 0.2s ease;
	}

	.hand-up-icon:active {
		transform: scale(0.9);
		opacity: 0.8;
	}

	.intro-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}

	/* 倒计时区 */
	.countdown-section {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.countdown-circle {
		margin: auto;
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		background-color: #fff;
		border: 30rpx solid rgb(240, 239, 242);
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.countdown-text {
		font-size: 60rpx;
		font-weight: 600;
		color: #1E90FF;
	}

	/* 弹幕区 */
	.danmu-container {
		position: fixed;
		left: 30rpx;
		bottom: 220rpx;

		width: 500rpx;
		max-height: 400rpx;
		overflow: hidden;
	}

	.danmu-item {
		display: flex;
		flex: 1;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 12rpx 20rpx;
		background-color: rgba(242, 242, 242, 0.7);
		border-radius: 32rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.danmu-content {
		font-size: 30rpx;
		color: #333;
		line-height: 1.5;
	}

	/* 底部操作区 */
	.footer-actions {
		position: fixed;
		left: 0;
		right: 0;
		height: 120rpx;
		padding: 0 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		border-top: 2rpx solid #eee;
		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: bottom 0.3s ease;
	}

	.message-input {
		flex: 1;
		display: flex;
		margin-right: 20rpx;
	}

	.input-field {
		flex: 1;
		height: 80rpx;
		padding: 0 24rpx;
		border-radius: 40rpx;
		background-color: #f5f5f5;
		font-size: 28rpx;
	}

	.action-button {
		width: 200rpx;
		height: 80rpx;
		background-color: #1E90FF;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		transition: background-color 0.3s;
	}

	.action-button.reserved {
		background-color: #4CAF50;
	}
</style>